{% extends "base.html" %} {% block content %}

<div class="row">
    <div class="col-md-6">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">系统状态</h3>
            </div>
            <div class="box-body">
                <div class="col-sm-12">
                    <table class="table no-border">
                        <tbody>
                            <tr>
                                <td class="pull-right"><strong>Nginx 版本</strong></td>
                                <td>{{ sysinfo.nginx }}&nbsp;<span id="sp_nginx_status"></span></td>
                                </td>
                            </tr>
                            <tr>
                                <td class="pull-right"><strong>主机名</strong></td>
                                <td>{{ sysinfo.platform.node }}</td>
                            </tr>
                            <tr>
                                <td class="pull-right"><strong>操作系统</strong></td>
                                <td>{{ sysinfo.platform.system }} {{ sysinfo.platform.release }}</td>
                            </tr>
                            <tr>
                                <td class="pull-right"><strong>系统架构</strong></td>
                                <td>{{ sysinfo.platform.processor }} </td>
                            </tr>
                            <tr>
                                <td class="pull-right"><strong>网络信息</strong></td>
                                <td>
                                    {% for nic in sysinfo.nic %}
                                    <small>{{ nic.nic }}</small> {{ nic.address }} {% endfor %}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">资源使用</h3>
            </div>
            <div class="box-body">
                <div class="col-sm-12">
                    <table class="table no-border">
                        <tbody>
                            <tr>
                                <div class="progress-group">
                                    <span class="progress-text">处理器</span>
                                    <span class="progress-number"><b><span id="sp_cpu_percent">-</span></b>/100%</span>
                                    <div class="progress active">
                                        <div class="progress-bar progress-bar-striped" role="progressbar" id="pgs_cpu">
                                        </div>
                                    </div>
                                </div>
                            </tr>
                            <tr>
                                <div class="progress-group">
                                    <span class="progress-text">内存</span>
                                    <span class="progress-number"><b><span id="sp_mem_used">-</span></b>/<span id="sp_mem_total"></span> MB</span>
                                    <div class="progress active">
                                        <div class="progress-bar progress-bar-striped" role="progressbar" id="pgs_mem">
                                        </div>
                                    </div>
                                </div>
                            </tr>
                            <tr>
                                <div class="progress-group">
                                    <span class="progress-text">磁盘</span>
                                    <span class="progress-number"><b><span id="sp_disk_used">-</span></b>/<span id="sp_disk_total"></span> GB</span>
                                    <div class="progress active">
                                        <div class="progress-bar progress-bar-striped" role="progressbar" id="pgs_disk">
                                        </div>
                                    </div>
                                </div>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">网站信息监控</h3>
            </div>
            <div class="box-body">
                <!--div class="col-sm-12"-->

                        <table class="table  table-condensed table-bordered" >

                            <tr>

                                <th rowspan="2" style="line-height:50px;" >网站</th>
                                <th colspan="2" >请求</th>
                                <th colspan="6">响应</th>
                                <th colspan="4" >流量</th>
                            </tr>
                            <tr>
                                <th >总请求数</th>
                                <th >每秒请求数</th>
                                <th >成功</th>
                                <th >重定向</th>
                                <th >客户端错误</th>
                                <th >服务端错误</th>
                                <th >总响应数</th>
                                <th >已发送流量</th>
                                <th >已接收流量</th>
                                <th >每秒发送量</th>
                                <th >每秒接收量</th>
                            </tr>

                            <tbody>
                                <tr class="active">
                                    <td>校主页</td>
                                    <td>8286</td>
                                    <td>52</td>
                                    <td>8282</td>
                                    <td>0</td>
                                    <td>4</td>
                                    <td>0</td>
                                    <td>8286</td>
                                    <td>26.2MB</td>
                                    <td>438.2KB</td>
                                    <td>5KB</td>
                                    <td>1.2KB</td>
                                </tr>
                                <tr class="success">
                                    <td>学生处</td>
                                    <td>35</td>
                                    <td>1</td>
                                    <td>30</td>
                                    <td>5</td>
                                    <td>0</td>
                                    <td>0</td>
                                    <td>35</td>
                                    <td>1.7MB</td>
                                    <td>25.9KB</td>
                                    <td>128B</td>
                                    <td>11B</td>
                                </tr>
                                <tr class="warning">
                                    <td>教务处</td>
                                    <td>261</td>
                                    <td>12</td>
                                    <td>174</td>
                                    <td>65</td>
                                    <td>22</td>
                                    <td>0</td>
                                    <td>261</td>
                                    <td>4.2MB</td>
                                    <td>182.2KB</td>
                                    <td>5.2KB</td>
                                    <td>1.2KB</td>
                                </tr>
                                <tr class="danger">
                                    <td>通信院</td>
                                    <td>37579</td>
                                    <td>45</td>
                                    <td>32031</td>
                                    <td>402</td>
                                    <td>4905</td>
                                    <td>241</td>
                                    <td>37579</td>
                                    <td>48.6MB</td>
                                    <td>26.8MB</td>
                                    <td>12.5KB</td>
                                    <td>1.3KB</td>
                                </tr>
                                <tr class="info">
                                    <td>总计</td>
                                    <td>46161</td>
                                    <td>110</td>
                                    <td>40517</td>
                                    <td>472</td>
                                    <td>4931</td>
                                    <td>241</td>
                                    <td>46161</td>
                                    <td>80.7MB</td>
                                    <td>27.4MB</td>
                                    <td>22.8KB</td>
                                    <td>3.7KB</td>
                                </tr>
                            </tbody>
                        </table>

                <!--/div-->
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">实时状态监控</h3>
            </div>
            <div class="box-body">
                <div class="col-sm-12">
                    <table id="tb_request_count" class="table table-bordered table-hover dataTable" role="grid">
                        <thead>
                            <tr role="row">
                                <th class="sorting" rowspan="1" colspan="1">活跃连接数</th>
                                <th class="sorting" rowspan="1" colspan="1">读取连接数</th>
                                <th class="sorting" rowspan="1" colspan="1">写入链接数</th>
                                <th class="sorting" rowspan="1" colspan="1">等待连接数</th>
                                <th class="sorting" rowspan="1" colspan="1">已接受请求数</th>
                                <th class="sorting" rowspan="1" colspan="1">已处理请求数</th>
                                <th class="sorting" rowspan="1" colspan="1">总请求数</th>
                                <th class="sorting" rowspan="1" colspan="1">每秒请求数</th>
                            </tr>
                        </thead>
                        <tbody id="tb_request_count_body">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>



{% load staticfiles %}
<script src="{% static "/static/AdminLTE/plugins/echarts/echarts.min.js" %}"></script>
<script src="{% static "/static/AdminLTE/plugins/echarts/macarons.js" %}"></script>
<script>
$('#menu_dashboard').addClass('active')
$('#menu_service').removeClass('active')
$('#page_header').text('服务状态')
$('#page_header_descript').text('系统状态展示')
$('#page_nav').text('服务状态')
$('#page_name').text('服务状态')

function get_status_info() {
    jQuery.ajax({
        type: 'post',
        url: '/dashboard/getinfo/',
        dataType: 'json',
        success: function(p) {
            if (p.flag == "Success") {
                if (p.context.sysstatus.nginx_status) {
                    $('#sp_nginx_status').removeClass()
                    $('#sp_nginx_status').addClass('label label-success')
                    $('#sp_nginx_status').text('运行中')
                } else {
                    $('#sp_nginx_status').removeClass()
                    $('#sp_nginx_status').addClass('label label-danger')
                    $('#sp_nginx_status').text('已停止')
                }

                $('#sp_cpu_percent').text(p.context.sysstatus.cpu_percent)
                $('#sp_mem_used').text(p.context.sysstatus.mem_info.used)
                $('#sp_mem_total').text(p.context.sysstatus.mem_info.total)
                $('#sp_disk_used').text(p.context.sysstatus.disk_info.used)
                $('#sp_disk_total').text(p.context.sysstatus.disk_info.total)

                $('#pgs_cpu').css('width', p.context.sysstatus.cpu_percent + '%')
                $('#pgs_mem').css('width', p.context.sysstatus.mem_info.used / p.context.sysstatus.mem_info.total * 100 + '%')
                $('#pgs_disk').css('width', p.context.sysstatus.disk_info.used / p.context.sysstatus.disk_info.total * 100 + '%')

            } else if (p.flag == "Error" && p.context == "AuthFailed") {
                alert('认证失败！请重新登录！')
                top.location = '/login/'
            }
        }
    })
}

get_status_info()
window.setInterval(get_status_info, 10000);
</script>
{% endblock %}
